<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../static/css/layout.css">
    <link rel="stylesheet" href="../static/css/containerCss.css">
</head>
<body>
<div id="app">
    <el-drawer
            title="我是标题"
            :visible.sync="drawer"
            :with-header="false">
        <el-table
                :data="tableData"
                stripe
                style="width: 100%">
            <el-table-column
                    prop="idcard"
                    label="身份证号"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="姓名"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="form_id"
                    label="病历号">
            </el-table-column>
        </el-table>
    </el-drawer>
    <el-container>
        <el-container>
            <!--            页头-->
            <el-header heigh="400px">
                发药界面
            </el-header>
            <el-main  v-show="tabIndex==0">
                <!--                第一行内容 包括身份证证号 姓名 家庭住址-->
                <el-row>
                    <el-col :span="5" :pull="2">
                        身份证证号
                    </el-col>
                    <el-col :span="3" :pull="3">
                        <el-input placeholder="请输入身份证证号" v-model="manId"  maxlength="18"  show-word-limit clearable></el-input>
                    </el-col>

                    <el-col :span="2" :pull="3">
                        姓名
                    </el-col>
                    <el-col :span="3"  :pull="3">
                        <el-input placeholder="请输入名字" v-model="name"   clearable></el-input>
                    </el-col>

                    <el-col :span="5" :pull="4">
                        家庭住址
                    </el-col>
                    <el-col :span="4"  :pull="5"  >
                        <el-input placeholder="请输入家庭住址" v-model="address"   clearable></el-input>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="5" :pull="2">
                        电话
                    </el-col>
                    <el-col :span="3" :pull="3">
                        <el-input placeholder="请输入电话" v-model="manId"  maxlength="18"  show-word-limit clearable></el-input>
                    </el-col>

                    <el-col :span="2" :pull="3">
                        年龄
                    </el-col>
                    <el-col :span="3"  :pull="3">
                        <el-input placeholder="请输入 年龄" v-model="name"   clearable></el-input>
                    </el-col>

                    <el-col :span="5" :pull="4">
                        工作单位
                    </el-col>
                    <el-col :span="4"  :pull="5"  >
                        <el-input placeholder="请输入工作单位" v-model="address"   clearable></el-input>
                    </el-col>
                </el-row>
                <!--                第三行内容 科室 医生和挂号费-->
                <el-row>
                    <el-col :span="5" :pull="2">
                        科室
                    </el-col>
                    <el-col :span="3" :pull="3">
                        <el-input   clearable v-model="department" disabled></el-input>
                    </el-col>
                    <el-col :span="2" :pull="3">
                        医生
                    </el-col>
                    <el-col :span="3"  :pull="3">
                        <el-input   clearable v-model="doced" disabled></el-input>
                    </el-col>
                    <el-col :span="5" :pull="4">
                        药费
                    </el-col>
                    <el-col :span="4"  :pull="5"  >
                        <el-input   clearable v-model="registerPrice" disabled></el-input>
                    </el-col>

                </el-row>
                <el-button type="primary">挂号完毕</el-button>
                <el-button >重置</el-button>
                <el-button @click="drawer = true" type="info" style="margin-left: 16px;">
                    打开消息列表
                </el-button>
            </el-main>
            <!--            页脚可以放些图片-->
            <el-footer >
                <div class="demo-image__lazy">
                    <el-image v-for="url in urls" :key="url" :src="url" lazy></el-image>
                </div>
            </el-footer>
        </el-container>
    </el-container>


</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    var app=new Vue({
        el:"#app",
        components:{

        },
        methods:{
            leaveTab:function (tab,event) {
                console.log(tab,event);
                if(tab.name==='0'){
                    this.tabIndex= 0;

                }
                else if(tab.name==='1'){
                    this.tabIndex= 1;

                }
                else if(tab.name==='2'){
                    this.tabIndex= 2;

                }
                else if(tab.name==='3'){
                    this.tabIndex= 3;

                }


            }

        },
        data:{
            department:'',
            doced:'',
            drawer: false,
            tabIndex:0,
            activeName: "first",
            urls: [
                // './assets/doc.png'
            ],
            registerPrice:2222,
            manId:0,
            tableData:'',
            name:'',
            address:'',
            options: [{
                value: '1',
                label: '黄金糕'
            }, {
                value: '2',
                label: '双皮奶'
            }, {
                value: '3',
                label: '蚵仔煎'
            }, {
                value: '4',
                label: '龙须面'
            }, {
                value: '5',
                label: '北京烤鸭'
            }],
            value: '',
            docs:[
                {value:'1',label:'华佗'},
                {value:'2',label:'张仲景'},
                {value:'3',label:'屠呦呦'},
                {value:'4',label:'扁鹊'},
                {value:'5',label:'神农氏'},
                {value:'6',label:'华佗儿子'},
            ]
        }
    })
</script>
</html>
